<script setup lang="ts">
import {ref} from "vue";
import {sysConfigApi} from "@/api/sysConfig";
import {SysConfigDto} from "@/type/sysConfig";
import {sysConfigDict} from "@/dict/sysConfig";

const drawerValue = ref(false)
const openDrawer = () => {
  drawerValue.value = true
  getData()
}

const dataLoading = ref(false)
let ifHaveData = false
const data = ref(new SysConfigDto())
const getData = () => {
  dataLoading.value = true
  sysConfigApi.selectAll({}).then(res => {
    ifHaveData = res.length !== 0
    if (ifHaveData) {
      data.value.id = res[0].id
      data.value.deepseekKey = res[0].deepseekKey
    } else {
      data.value = new SysConfigDto()
    }
  }).finally(() => {
    dataLoading.value = false
  })
}
const delall = () => {
  sysConfigApi.deleteList(data.value.id).finally(() => {
    getData()
  })
}
const save = () => {
  dataLoading.value = true
  if (ifHaveData) {
    sysConfigApi.updateOne(data.value).then(() => {
      getData()
    }).catch(() => {
      dataLoading.value = false
    })
  } else {
    sysConfigApi.insertOne(data.value).then(() => {
      getData()
    }).catch(() => {
      dataLoading.value = false
    })
  }
}
</script>

<template>
  <div
    v-if="!drawerValue"
    class="semi-round-btn"
    @click="openDrawer"
  >设置</div>
  <el-drawer
    v-model="drawerValue"
    title="设置"
  >
    <el-form :model="data" v-loading="dataLoading">
      <el-form-item :label="sysConfigDict.deepseekKey">
        <el-input v-model="data.deepseekKey" />
      </el-form-item>
      <el-button-group>
        <el-button @click="delall">清除</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-button-group>
    </el-form>
  </el-drawer>
</template>

<style scoped>

/* 基础按钮样式 - 左侧半圆右侧方角 */
.semi-round-btn {
  position: fixed;
  right: 0; /* 吸附在右侧 */
  bottom: 24px;
  padding: 10px 24px 10px 18px; /* 右侧多留空间 */
  border-radius: 20px 0 0 20px; /* 左侧半圆，右侧直角 */
  background-color: #409eff;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(64, 158, 255, 0.3); /* 左侧阴影 */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  clip-path: inset(-5px -5px -5px 0); /* 防止hover溢出 */
}

/* 悬停效果 - 向左微微延伸 */
.semi-round-btn:hover {
  background-color: #66b1ff;
  padding-right: 28px;
  box-shadow: -3px 3px 12px rgba(64, 158, 255, 0.4);
  transform: translateX(-4px);
}

/* 点击效果 */
.semi-round-btn:active {
  transform: translateX(0);
  background-color: #3a8ee6;
}

/* 右侧装饰线（可选） */
.semi-round-btn::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  width: 1px;
  background-color: rgba(255,255,255,0.3);
  transition: all 0.3s;
}

.semi-round-btn:hover::after {
  right: 16px;
  height: 18px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .semi-round-btn {
    bottom: 16px;
    padding: 8px 20px 8px 14px;
    font-size: 13px;
  }
}
</style>